<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('添加接口')" :v-if="dialogVisible" :visible.sync="dialogVisible" append-to-body width="900px" top="10vh" @close='close'>
    <el-table size='mini' ref="multipleTable" border :data="dataList" max-height="60vh" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="strPhysicsName" :label="$t('接口名称')" align='center' min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.strPhysicsName" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="cDevOtherName" :label="$t('别名')" align='center' min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.cDevOtherName" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="enPortMode" :label="$t('模式')" align='center' min-width="120">
        <template slot-scope="scope">
          {{ $t(enPortModeArray[scope.row.enPortMode]) }}
        </template>
      </el-table-column>
      <el-table-column prop="ipv4" :label="$t('IPV4/子网掩码')" align='center' min-width="150">
        <template slot-scope="scope">
          <tooltip :html="ipv4MapShow(scope.row, '<br/>')" :content="ipv4MapShow(scope.row, ' ')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ipv6" :label="$t('IPV6/前缀')" align='center' min-width="150">
        <template slot-scope="scope">
          <tooltip :html="ipv6MapShow(scope.row, '<br/>')" :content="ipv6MapShow(scope.row, ' ')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="bLinkStatus" :label="$t('链路状态')" align='center' min-width="100">
        <template slot-scope="scope">
          {{ bLinkStatusArray[scope.row.bLinkStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="bPortStatus" :label="$t('状态')" align='center' min-width="100">
        <template slot-scope="scope">
          {{ $t(bPortStatusArray[scope.row.bPortStatus]) }}
        </template>
      </el-table-column>
      <el-table-column prop="iMtu" label="Mtu值" align='center' min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.iMtu" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="bandwidth" :label="$t('速率')" align='center' min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.bandwidth" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="addSubmit">{{$t('保 存')}}</el-button>
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>

import { getPhysicalApiArray } from '@/api/network/api/physical'
export default {
  name: 'SysDialog',
  data () {
    return {
      dialogVisible: false,
      dataList: [],
      selectList: [],
      enPortModeArray: {
        0: '路由模式',
        1: '透明模式',
        2: '聚合模式',
        3: '虚拟线模式'
      },
      bLinkStatusArray: {
        1: 'up',
        0: 'down'
      },
      bPortStatusArray: {
        'up': '开启',
        'down': '关闭'
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      getPhysicalApiArray().then(res => {
        if (res.status === 0) {
          this.dataList = res.info
        }
      })
    },
    submit () {
      this.$emit('addApi', this.selectList)
      this.close()
    },
    close () {
      this.dialogVisible = false
      this.dataList = []
      this.selectList = []
    },
    handleSelectionChange (data) {
      this.selectList = data
    },
    ipv4MapShow (data, str) {
      let reStr = ''
      if (data.ipv4) {
        data.ipv4.forEach(val => {
          if (val.cPortIpv4) {
            reStr += val.cPortIpv4 + '/' + val.cPortNetmask
            reStr += str
          }
        })
      }
      return reStr
    },
    ipv6MapShow (data, str) {
      let reStr = ''
      if (data.ipv6) {
        data.ipv6.forEach(val => {
          if (val.cDevIpv6Prefix) {
            reStr += val.cDevIpv6Prefix + '/' + val.cPortIpv6
            reStr += str
          }
        })
      }
      return reStr
    }
  }
}
</script>
